<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新建销售单</title>
		<link rel="stylesheet" href="${ctx}/css/H-ui.min.css" />
		<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
		<style>
			.new_library>p>a{font-size: 14px;margin-left: 15px;color: #62affc;}
			.new_library{position:relative;padding-left:0;padding-right:0;width: 1000px;height: 700px;background: #f8f8f8;margin:20px auto;}
		    .new_library>p{display: flex;height: 50px;line-height: 50px;border-bottom: 1px solid #efefef;margin-bottom: 0;}
		    .Navigation{height: 50px;background: #f8f8f8;border-bottom: 1px solid #efefef;line-height: 50px;display: flex;}
		    .Navigation label:nth-of-type(1){width: 20%;display: flex;justify-content: space-around;}
		    .Navigation label:nth-of-type(2){width: 20%;display: flex;justify-content: space-around;}
		    .Navigation label:nth-of-type(3){width: 60%;display: flex;justify-content: space-around;}
		    .inputShow{height: 80px;border-bottom:1px dashed #CCCCCC;background: #FFFFFF;}
		    .conent{background: #FFFFFF;height: 597px;}
		    .inputShow input{border:0;border-bottom: 1px solid #CCCCCC;margin-left: 80px;margin-top:15px;}
		    .inputShow p img{width: 5%;}
		    .Choice{height: 80px;border-bottom: 1px dashed #CCCCCC;line-height: 80px;}
		    .Choice input{border:0;border-bottom: 1px solid #CCCCCC;}
		    .Choice input:nth-of-type(1){width: 50%;}
		    .sequence{height: 80px;border-bottom: 1px solid #CCCCCC;line-height: 80px;}
		    .sequence ul{display: flex;justify-content: space-around;}
		    #AllocationBtn{width: 100px;height: 30px;text-align: center;line-height: 20px;color: #FFFFFF;background: #62affc;border-radius: 5px;margin-top: 50px;position: absolute;right: 0;cursor: pointer;}
		    #backConent input{background: #fff2f2;}
		
		
		</style>
	</head>
	<body>
		<div class="container new_library" id="new_library">
			<p>
				<a href="index.html">返回</a>
				<span style="text-indent: 35em;" >新建入库单</span>
			</p>
			<div class="Navigation">
				<label for="">
					<p><input type="radio" name="xiaoshou" class="clickLabel"  value="0"/>销售单</p>
					<p><input type="radio" name="xiaoshou" class="clickLabel"  value="1"/>退货单</p>
				</label>
				<label for="">
					<p><input type="checkbox" name="" />收款</p>
					<p><input type="checkbox" name="" />出库</p>
				</label>
				<label for="">
					<p><input type="checkbox" name="" />备注</p>
					<p><input type="checkbox" name="" />时间</p>
					<p><input type="checkbox" name="" />发货</p>
					<p><input type="checkbox" name=""/>单号</p>
				</label>
			</div>
			<div class="conent">
				<div class="inputShow">
				   <input type="text" placeholder="零售客户" name="" />
				   <input type="text" placeholder="收款账户" name="" />
				   <input type="text" placeholder="出库仓库" name="" />
				   <input type="text" placeholder="备注" name="" />
				   <input type="text" placeholder="外部单号" name="" />
				   <input type="text" placeholder="销售时间" name="" />
				   <input type="text" placeholder="送货" name="" />
			    </div>
			    <div class="Choice">
			    	<input type="text" placeholder="输入或选择产品" name="" />
			    	<input type="text" placeholder="价格" name="" />
			    	<input type="text" placeholder="数量" name="" />
			    </div>
			    <div class="sequence">
					<ul>
						<li>序号</li>
						<li>品名</li>
						<li>款号</li>
						<li>颜色</li>
						<li>尺码</li>
						<li>单价</li>
						<li>折扣</li>
						<li>数量</li>
						<li>出库件数</li>
						<li>赠送</li>
						<li>金额</li>
					</ul>
				</div>
				<button >创建订单</button>
			</div>
		</div>
		
		<div class="container new_library" id="new_library2" style="display: none;">
			<p>
				<a href="index.html">返回</a>
				<span style="text-indent: 35em;" id="showSpen">新建销售单</span>
			</p>
			<div class="Navigation">
				<label for="">
					<p><input type="radio" name="radio" class="clickLabel" value="0"/>销售单</p>
					<p><input type="radio" name="radio" class="clickLabel" value="1"/>退货单</p>
				</label>
				<label for="">
					<p><input type="checkbox" name="" />退款</p>
					<p><input type="checkbox" name="" />入库</p>
				</label>
				<label for="">
					<p><input type="checkbox" name="" />备注</p>
					<p><input type="checkbox" name="" />单号</p>
				</label>
			</div>
			<div class="conent"  style="background: #fff2f2;" id="backConent">
				<div class="inputShow" style="background: #fff2f2;">
				   <input type="text" placeholder="零售客户" name="" />
				   <input type="text" placeholder="退款账户" name="" />
				   <input type="text" placeholder="入库仓库" name="" />
				   <input type="text" placeholder="备注" name="" />
			    </div>
			    <div class="Choice">
			    	<input type="text" placeholder="输入或选择产品" name="" />
			    	<input type="text" placeholder="价格" name="" />
			    	<input type="text" placeholder="数量" name="" />
			    </div>
			    <div class="sequence">
					<ul>
						<li>序号</li>
						<li>品名</li>
						<li>款号</li>
						<li>颜色</li>
						<li>尺码</li>
						<li>单价</li>
						<li>折扣</li>
						<li>数量</li>
						<li>出库件数</li>
						<li>赠送</li>
						<li>金额</li>
					</ul>
				</div>
				<button id="AllocationBtn">创建订单</button>
			</div>
		</div>
		<!--//点击切换div-->
		<script type="text/javascript">
			$(function(){
		      $('.clickLabel').click(function(){
		      	if($(this).val()==0){//判断当前点击的是哪个input
		      		$('#new_library').show();
		       		$('#new_library2').hide();
		       		$(".clickLabel").each(function(){
		       			if($(this).val()==0){
		       				$(this).prop('checked', true);
		       			}else{
		       				$(this).prop('checked', false);
		       			}
		      		})
		      	}else{
		      		$('#new_library').hide();
		       		$('#new_library2').show();
		       		$(".clickLabel").each(function(){
		       			if($(this).val()==1){//判断当前点击的是哪个input
		       				$(this).prop('checked', true);
		       			}else{
		       				$(this).prop('checked', false);
		       			}
		      		})
		      	}
		      })
			})
		</script>
	</body>
</html>
